<template>
  <div class="room-list">
    <div class="search-condition">
      <div class="p-l-10">
        <el-input
          style="width: 300px"
          v-model="filterValues.roomName"
          placeholder="请输入会议室名称"
          :suffix-icon="Search"
          size="large"
        />
        <el-select
          class="m-l-20"
          style="width: 200px"
          v-model="filterValues.status"
          placeholder="选择会议室状态"
          size="large"
          @change="onSearch()"
          ><el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button size="large" class="m-l-20" plain @click="onSearch()" type="primary">
          搜索
        </el-button>
        <el-button size="large" plain @click="reset" type="primary">重置</el-button>
      </div>
      <el-button type="success" round :icon="Clock" @click="drawerVisile = true"
        >我的预约</el-button
      >
    </div>

    <div v-if="!isEmpty">
      <div class="card-box" v-for="(item, index) in roomReserveList" :key="item.id">
        <div
          class="accordion"
          @click="accordionController(item)"
          :ref="
            (
              el // @ts-ignore
            ) => (roomRefs[item.id] = el)
          "
        >
          <div class="room-card">
            <div class="room-name m-r-20">
              <span class="color-gray">会议室名称：</span>
              <span>{{ item.roomName }}</span>
            </div>
            <div class="create-name m-r-20">
              <span class="color-gray">最多容纳人数：</span>
              <span>{{ item.maxPeople }}</span>
            </div>
            <div class="meeting-status m-r-20">
              <div>
                <span class="color-gray">状态：</span>
                <el-tag v-if="item.status === 1" type="success">可预约</el-tag>
                <el-tag v-if="item.status === 0" type="danger">无法预约</el-tag>
              </div>
            </div>
            <div class="meeting-info">
              <span class="color-gray">会议室介绍：</span>
              <span :title="item.roomDescription"> {{ item.roomDescription }} </span>
            </div>
          </div>
          <el-icon :size="20" color="grey"><Plus /></el-icon>
        </div>
        <calernderTable
          v-model="item.roomReservations"
          class="calendar"
          v-if="item.calendarVisible"
          :key="item.id"
        />
      </div>
    </div>
    <el-empty v-if="isEmpty" description="没有符合条件的数据" />
    <el-pagination
      v-if="!isEmpty"
      background
      class="m-t-10 m-b-10"
      style="justify-content: flex-end"
      layout="prev, pager, next"
      :total="total"
      v-model:current-page="currentPage"
      @current-change="handlePageChange"
    />
    <myReserve v-model:drawerVisile="drawerVisile" />
  </div>
</template>

<script setup lang="ts">
import myReserve from './components/myReserve.vue';
import calernderTable from './components/calenderTable.vue';
import { Plus, Search } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import { MoreFilled, Clock } from '@element-plus/icons-vue';
import { useRoomReserveStore } from '@/store/roomReserve';
import { storeToRefs } from 'pinia';
import { getRoomList } from '@/api/meeting';
import { getParkIntroduce } from '@/api/park';
import { ElMessageBox } from 'element-plus';

const useRoomReserve = useRoomReserveStore();
const { roomReserveList, filterValues, reserveForm } = storeToRefs(useRoomReserve);
const options = ref([
  { value: 1, label: '可预约' },
  { value: 0, label: '不可预约' },
]);
const total = ref(20);
const currentPage = ref(1);
const drawerVisile = ref(false);
const roomRefs = ref({}); // 用来存储每个 room 的 DOM 引用
interface RoomReservation {
  createTime: string;
  updateTime: string;
  createBy: string;
  updateBy: string;
  id: number;
  roomId: number;
  userId: number;
  enterpriseId: number;
  startTime: string;
  endTime: string;
  remark: string;
  status: number;
}

interface roomList {
  createTime: string;
  updateTime: string;
  createBy: string;
  updateBy: string;
  id: number;
  roomNumber: string;
  roomName: string;
  maxPeople: number;
  roomDescription: string;
  status: number;
  calendarVisible: boolean;
  roomReservations: RoomReservation[];
}

const isEmpty = ref(false);
const content = ref('')

const disabledDate = (time: Date) => {
  const now = new Date();
  now.setHours(0, 0, 0, 0); // 设置为今天的00:00:00（即去除时分秒部分）
  return time < now; // 禁用今天之前的日期（不包括今天）
};
const accordionController = (item: roomList) => {
  if (item.status === 0) return;
  reserveForm.value.roomId = item.id;
  item.calendarVisible = !item.calendarVisible;
  for (let i = 0; i < roomReserveList.value.length; i++) {
    if (roomReserveList.value[i] == item) {
      continue;
    }
    roomReserveList.value[i].calendarVisible = false;
  }
};
const reset = () => {
  filterValues.value = { roomName: null, status: null };
  onSearch();
};
const handlePageChange = (val: number) => {
  onSearch(currentPage.value, 10);
};

const onSearch = (current = 1, size = 10) => {
  getRoomList({
    current,
    size,
    ...filterValues.value,
  }).then((res) => {
    roomReserveList.value = res.data?.records;
    total.value = res.data?.total;
  });
};

onMounted(() => {
  // getParkIntroduce(25).then((res: any) => {
  //   if (res.code === 200) {
  //     content.value = res.data.content;
  //     ElMessageBox.alert(content.value, '会议室预约须知', {
  //       confirmButtonText: '我知道了',
  //       showCancelButton: false,
  //       showClose: false,
  //     });
  //     onSearch();
  //   }
  // });
  onSearch()

  
});
</script>

<style lang="scss" scoped>
.search-condition {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.room-list {
  padding: 20px;
}
.card-box {
  margin: 20px 0;
}
.room-card {
  display: flex;
}
.accordion {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  &:hover {
    background-color: #eee;
  }
}
// .active {
//   max-height:max-content;
// }
// .calendar {
//   overflow: hidden;
//   max-height:0;
// }
</style>
